<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的第一个入门案例</title>


</head>
<body>
<!--1.{{}}(插值表达式)和v-text获取数据的区别在于
                a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
                b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁-->
<div id="app" class="aa">
    <span>{{message}}</span>
    <br>
    <span v-text="message"></span>
    <br>
    <span v-html="message">xxxxxx</span> <!-- v-html会对元素中的html标签进行解析  -->
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "<a href='https://www.baidu.com/'>百知欢迎您</a>"
        }
    })
</script>

</body>
</html>